function createReader(cb) {
    return function(event) {
      const file = event.target.files[0];
      const fr = new FileReader();
      fr.onload = function() {
        // var img = new Image();
        // img.src = fr.result;
        // cb(img);
        cb(fr.result);
      }
      fr.readAsDataURL(file);
    }
  }

var imgArr = ['p.jpg', '01.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg',
  'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg',
  'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg', 'p.jpg',
  'p.jpg'];

const perPage = 10;
const totalPage = Math.ceil(imgArr.length / perPage);
let curPage = 1;

  function showImg(page = curPage, perPage = 10){
    console.log('showImg:' + page);
    curPage = page;
    const begin = (page - 1) * perPage;
    const end = (page * perPage > imgArr.length) ? imgArr.length : page * perPage;
    const imgDom = document.querySelector('.img-group');
    // console.log(imgDom);
    while (imgDom.lastChild) {
      imgDom.removeChild(imgDom.lastChild);
    }
    for(let i = begin; i < end; i++){
      let li = document.createElement("li");
      let img = new Image();
      let span = document.createElement('span');
      img.src = imgArr[i];
      span.innerHTML = 'x';
      li.appendChild(img);
      li.appendChild(span);
      imgDom.appendChild(li);
    }

    //设置分页状态
    initPage();
  }
  showImg(curPage);

  //创建相册
  function createAlbumFn(){
    let name = prompt('请输入相册名称');
    const menuDom = document.querySelector('.menu ul');
    const li = document.createElement('li');
    const a = document.createElement('a');
    const span = document.createElement('span');
    a.href = '#';
    a.innerHTML = name;
    span.innerHTML = 'x';
    li.appendChild(a).appendChild(span);

    const lastChild = menuDom.lastChild.cloneNode(true);
    menuDom.removeChild(menuDom.lastChild);

    menuDom.insertBefore(li, menuDom.lastChild);
  }

  //生成分页
  function initPage(){
    console.log('initPage');
    const pageDom = document.querySelector('.page');
    while (pageDom.lastChild) {
      pageDom.removeChild(pageDom.lastChild);
    }
    const first = document.createElement('li');
    const firstA = document.createElement('a');
    //首页
    firstA.innerHTML = "首页";
    if(curPage == 1){
      firstA.className = 'none';
    }else{
      firstA.addEventListener("click", function(e){
        showImg(1);
      }, false);
    }
    first.className = "first";
    first.appendChild(firstA);
    pageDom.appendChild(first);
    //上一页
    const prev = document.createElement('li');
    const prevA = document.createElement('a');
    prevA.innerHTML = "上一页";
    if(curPage == 1){
      prevA.className = 'none';
    }else{
      prevA.addEventListener("click", function(e){
        showImg(curPage - 1);
      }, false);
    }
    prev.className = "prev";
    prev.appendChild(prevA);
    pageDom.appendChild(prev);

    for(let i = 0; i < totalPage; i++){
      const page = document.createElement('li');
      const pageA = document.createElement('a');
      pageA.innerHTML = i + 1;
      if(curPage == (i+1)){
        pageA.className = 'current';
      }
      page.addEventListener("click", function(e){
        showImg(i+1);
      }, false);
      page.className = 'page' + i;
      page.appendChild(pageA);
      pageDom.appendChild(page);
    }

    //下一页
    const next = document.createElement('li');
    const nextA = document.createElement('a');
    nextA.innerHTML = "下一页";
    if(curPage == totalPage){
      nextA.className = 'none';
    }else{
      nextA.addEventListener("click", function(e){
        showImg(curPage + 1);
      }, false);
    }
    next.className = "next";
    next.appendChild(nextA);
    pageDom.appendChild(next);
    //尾页
    const last = document.createElement('li');
    const lastA = document.createElement('a');
    lastA.innerHTML = "尾页";
    if(curPage == totalPage){
      lastA.className = 'none';
    }else{
      lastA.addEventListener("click", function(e){
        showImg(totalPage);
      }, false);
    }
    last.className = "last";
    last.appendChild(lastA);
    pageDom.appendChild(last);
  }
  // initPage();


  //上传图片
  const input = document.querySelector("input[type=file]");
  input.addEventListener("change", createReader(readImage));
  function readImage(img){
    // const imgDom = document.querySelector('.img-group');
    // let li = document.createElement("li");
    // let span = document.createElement('span');
    // span.innerHTML = 'x';
    // li.appendChild(img);
    // li.appendChild(span);
    // imgDom.appendChild(li);
    // imgDom.insertBefore(img, imgDom.firstChild);
    imgArr.unshift(img);
    // totalPage = Math.ceil(imgArr.length / perPage);
    showImg();
  }
